<template>
    <user-card-list :user-list="userList" />
    <van-empty image="search" description="暂无数据" v-if="!userList || userList.length < 1" />
</template>

<script setup>
import { useRoute } from 'vue-router'
import { onMounted, ref } from 'vue'
import myAxios from '../plugins/myAxios.ts'
import qs from 'qs'
import UserCardList from '../components/UserCardList.vue'

const route = useRoute()
const tags = route.query.tags
const userList = ref([])

onMounted(async () => {
    const userListData = await myAxios
        .get('/user/search/tags', {
            params: {
                tagNameList: tags
            },
            paramsSerializer: params => {
                return qs.stringify(params, { indices: false })
            }
        })
        .then(resp => {
            console.log('请求成功', resp)
            return resp?.data
        })
        .catch(error => {
            console.log('请求失败', error)
        })

    if (userListData) {
        userListData.forEach(user => {
            if (user.tags) {
                user.tags = JSON.parse(user.tags)
            }
        })
        userList.value = userListData
    }
})
</script>

<style scoped></style>
